<template>
  <div class="flex py-2 overflow-hidden items-end">
    <h3 class="mian_label font-bold mr-2 select-none flex items-center" @click="onClickTitle">
      <span>{{ label }}</span>
      <svg v-if="showLeftRow" style="width: 30px; height: 30px" viewBox="0 0 24 24">
        <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
      </svg>
    </h3>
    <div v-if="subList.length" class="flex items-end h-[25px] song_item">
      <div
        v-for="(item, index) in subList"
        :key="index"
        :class="currentIndex === index ? 'active' : ''"
        @click="changeSubItem(index)"
      >
        <span class="text-sm mx-2 cursor-pointer select-none text">{{ item.name }}</span>
      </div>
    </div>
    <div v-if="more" class="ml-auto flex cursor-pointer" @click="handleMore">
      <slot name="more">
        <span class="text-sm">更多</span>
        <svg style="width: 20px; height: 20px" viewBox="0 0 24 24">
          <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
        </svg>
      </slot>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const prop = defineProps({
  label: String,
  subList: {
    type: Array,
    default: () => []
  },
  subActive: {
    type: [Number, String],
    default: 0
  },
  more: {
    type: Boolean,
    default: false
  },
  showLeftRow: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['changeSubItem', 'handleMore', 'onClickTitle'])
const currentIndex = ref(prop.subActive)
const changeSubItem = (index) => {
  currentIndex.value = index
  emit('changeSubItem', prop.subList[index], index)
}

const handleMore = () => {
  emit('handleMore')
}

const onClickTitle = () => {
  emit('onClickTitle')
}
</script>

<style lang="scss" scoped>
* {
  transition: height 0.3s !important;
}

.active {
  //font-size: 18px;
  border-radius: 5px;
  background-color: var(--playBg);
}

.active .text {
  color: var(--active) !important;
}
</style>
